.screen-mockup
  top: -200px

.section-best-practices
  @media (max-width: $screen-sm)
    .img-responsive
      top: 100px

.section-infinite-possibilities
  @include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after)
    top: -80px
    left: 0

.section-framework
  @include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after)
    top: -80px
    left: 0

.live-section
  @include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after)
    top: -80px
    left: 0

  a
    text-decoration: none

  a:hover span
    text-decoration: underline

  .container .col-md-12
    transform-style: preserve-3d
    perspective: 1030px

    .row
      @media (max-width: $screen-sm)
        height: auto !important

      .col-md-4
        &:nth-child(1) .card
          transform: rotateY(30deg) skewY(3deg) scale(1.08) translateY(-1.5%)

        &:nth-child(3) .card
          transform: rotateY(-30deg) skewY(-3deg) scale(1.08) translateY(-1.5%)
        @media (max-width: $screen-sm)
          &:not(:last-child)
            margin-bottom: 2em



  .card
    margin: auto
    width: 100%
    top: 0
    left: 0

    @media (max-width: $screen-md)
      transform: none !important




.discover-section
  @include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after)
    top: -80px
    left: 0
  .card
    line-height: 60px

  .card:hover
    background: $titan-white !important

  @media (max-width: $screen-sm)
    .logos-container
      height: auto !important

    .card
      margin-bottom: 1em

    .col-md-12 .col-md-4,
    .mobile-projects
      padding: 0



.content
  .btn
    @media (max-width: $screen-sm)
      margin: auto
      display: block
      max-width: 280px

    @media (max-width: $screen-xs)
      width: 100%

.home
  &.content
    margin-bottom: 300px

  @media (max-width: $screen-sm)
    .container,
    .col-md-12,
    .col-md-6,
    .col-md-8.col-md-offset-2,
    .col-md-10.col-md-offset-2
      padding-left: 0 !important
      padding-right: 0 !important
      max-width: 100%
    .col-md-10.col-md-offset-2 .m-l-large
      margin-left: 0 !important
    .col-md-12.row
      margin: 0 !important

    .section-illustration
      display: block
      max-width: 80%
      margin: 2em auto

    h3, p
      text-align: center

    .screen-mockup img
      max-width: 600px


